<template>
  <div>
    <div class="component-label">创意资源</div>
    <upload-componet :accept="`${creativor.way}/*`" :params="uploadParams" @finish="onFinish" @error="onError"
      @progress="onProgress" @before-upload="onBefore" :rules="rules" :value="component" @remove="removeMeida">
    </upload-componet>
  </div>

</template>
<script setup lang="ts">
import { computed, reactive, toRef } from 'vue';
import { useStore } from '@/store';
import { uploadImage } from '@/api/intelligent';
import UploadComponet from './upload.vue';
// media Update Code ok
import MediaComponent from '@/store/modules/adv/component/media/single';
const store = useStore();
const emit = defineEmits(['before-upload', 'finish', 'error', 'progress', 'controlUpdate']);
const creativor = computed(() => store.state.adv.modal.creativor);
const account = computed(() => {
  const accounts = store.state.adv.accounts;
  return accounts[0];
})
const props = withDefaults(defineProps<{
  component: MediaComponent
  params: any
}>(), {

});
function getRestriction(restriction: any) {
  // const { video_restriction, image_restriction } = restriction || {};
  return restriction

}
const restriction = computed(() => {
  return getRestriction(props.component.media_restriction);
})
const uploadParams = computed(() => {

  return {
    action: `/api/adgroup/${creativor.value.way}/upload`,
    accept: creativor.value.way + '/*',
    data: {
      accountCode: account.value ? account.value.accountCode : undefined,
      adcreativeTemplateId: creativor.value.creativeTemplateId
    }
  }
});

const rules = computed(() => {
  const rules = restriction.value;
  return {
    rect: [rules.min_width || rules.width || 500, rules.min_height || rules.height || 500],
    file_format: rules.file_format || [],
    duration: rules.min_duration || rules.max_duration ? [rules.min_duration, rules.max_duration] : [],

    suggest: rules.width || rules.height ? [rules.width, rules.height] : [],
    size: rules.file_size || (512000),
    ratio: rules.ratio_width ? [rules.ratio_width, rules.ratio_height] : []
  };
});

async function onFinish(e: any) {
  const media = props.component;
  media.media_url = e.media_url;
  media.meta_type = e.meta_type;
  media.media_id = e.mediaId;
  // media.init(e);
  media.keyFrameImageUrl = e.keyFrameImageUrl;
  media.fileSize = e.fileSize;
  media.mediaHeight = e.mediaHeight;
  media.mediaName = e.mediaName;
  media.mediaWidth = e.mediaWidth;
  media.mediaType = e.mediaType;
  media.mediaSignature = e.mediaSignature;
  media.videoMillisecond = e.videoMillisecond;
  media.accountCode = account.value.accountCode

  if (media.meta_type === 'video') {
    const res = await uploadImage({
      accountCode: account.value.accountCode,
      keyFrameImageUrl: e.keyFrameImageUrl
    });
    console.log(media.cover_id, res, 'uploadImage');
    media.cover_id = res.data.mediaId;

  }

  // console.log(media, 'media');
  emit('finish', e);
  emit('controlUpdate', media)
}

function onBefore(e: any) {
  emit('before-upload', e)
}


function onError(e: any) {
  emit('error', e)
}


function onProgress(e: any) {
  // load.value = false;
  emit('progress', e)
}
function removeMeida(e: any) {
  const media = props.component;
  media.media_url = ''
  media.meta_type = ''
  media.media_id = ''
  media.keyFrameImageUrl = '';
  emit('controlUpdate', media)

}


const component = toRef<any, any>(props, 'component')
const form = reactive({
  media_id: component.value.media_id || '',
  media_url: component.value.media_url || '',

});



</script>

<style lang="scss" scoped>
.component-label {
  line-height: 22px;
  color: rgba(38, 38, 41, 0.72);
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
